<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ST7789工具</title>
    <style>
        :root {
            --primary-color: #4a90e2;
            --secondary-color: #f5a623;
            --background-color: #f0f4f8;
            --text-color: #333;
            --border-radius: 8px;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1, h2 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
        }

        .section {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .flex-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .flex-item {
            flex-basis: calc(50% - 15px);
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .flex-item {
                flex-basis: 100%;
            }
        }

        input[type="file"], textarea, .result-box {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 16px;
            box-sizing: border-box;
        }

        .result-box {
            background-color: #fff;
            min-height: 100px;
            resize: vertical;
            overflow: auto;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: var(--border-radius);
            transition: background-color 0.3s ease;
            margin-top: 20px;
            width: 100%;
        }
        .flex-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center; 
    }

        button:hover {
            background-color: #3a7bc8;
        }

        .message {
            background-color: #e8f5e9;
            border-left: 5px solid #4caf50;
            padding: 15px;
            margin-top: 20px;
            border-radius: var(--border-radius);
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <h1>ESP32中文字库生成工具(TFT_eSPI)</h1>
        
        <div class="section">
            <h2>上传 VLW 文件</h2>
            <form id="uploadForm" action="" method="post" enctype="multipart/form-data">
                <input type="file" name="file" accept=".vlw" required>
                <button type="submit">上传并生成字库</button>
            </form>
            <div class="flex-container" style="margin-top: 20px;">
                <div class="flex-item">
                    <label for="exampleCode1">调用示例代码：</label>
                    <textarea id="exampleCode1" class="result-box" readonly></textarea>
                </div>
                <div class="flex-item">
                    <label for="exampleCode2">中文库文件内容：</label>
                    <textarea id="exampleCode2" class="result-box" readonly></textarea>
                </div>
            </div>
        </div>
    <div class="section">
        <h2>中文转换为processing所需内容</h2>
        <div class="flex-container">
            <div class="flex-item">
                <form id="chineseForm">
                    <label for="chineseInput">输入中文：</label>
                    <textarea id="chineseInput" name="chinese_text" class="result-box" placeholder="请输入中文" required></textarea>
                    <button type="submit">转换为processing所需内容</button>
                </form>
            </div>
            <div class="flex-item">
                <label for="unicodeResult">转换结果：</label>
                <div id="unicodeResult" class="result-box" aria-live="polite"></div>
                <button type="button" onclick="window.location.href='/get_rgb565'">ST7789图片转换工具</button>
            </div>
        </div>
    </div>
    </div>
    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();  // 阻止默认提交行为

    var formData = new FormData(this);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            // 填充生成的代码
            const hexData = data.hex_data;
            const headerFileContent = data.data;

            // 生成最终的代码
            const generatedCode = `
#include <TFT_eSPI.h>
#include "qingning_Font.h"

TFT_eSPI tft;

void setup() {
    tft.begin();
    tft.writecommand(0x36);
    tft.writedata(0x00);                  //初始化TFT屏幕
    tft.fillScreen(TFT_BLACK);    //刷屏底色为黑色
    tft.setTextColor(TFT_YELLOW); //设置字体颜色
    tft.loadFont(qingning_Font);

    tft.setCursor(0, 0);       //设置光标位置
    tft.println("青柠");     //打印文字

    tft.unloadFont();             //释放字库,节省RAM
}

void loop() {

}
            `;

            // 填充示例代码到 textarea
            document.getElementById('exampleCode1').value = generatedCode;
            document.getElementById('exampleCode2').value = headerFileContent;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('上传文件时出错');
    });
});


document.getElementById('chineseForm').addEventListener('submit', function(e) {
        e.preventDefault();  // 阻止表单默认提交

        const chineseText = document.getElementById('chineseInput').value;

        if (!chineseText) {
            alert('请输入中文内容');
            return;
        }

        // 发送请求到后端接口
        fetch('/convert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                chinese_text: chineseText
            })
        })
        .then(response => response.json())
        .then(data => {
            // 更新转换结果显示
            if (data.unicode_result) {
                document.getElementById('unicodeResult').textContent = data.unicode_result;
            } else {
                document.getElementById('unicodeResult').textContent = '转换失败或没有结果';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('unicodeResult').textContent = '请求错误，请稍后再试';
        });
    });

    </script>
</body>
</html>
